<template>
    <div class="search">
        <ul>
            <li><van-icon name="arrow-left" @click="fun"/></li>
            <li>
                <van-search v-model="value" shape="round" placeholder="清风抽纸" @input="showList"/>
            </li>
            <li><button @click="fun1">搜索</button></li>
        </ul>
        
           <!-- 搜索下拉 -->
     <div class="searchCommand" v-if="show">
        <div class="card" v-for="(v,index) in arrSearch" :key="index" @click="goDetail2(v)">
            <img src="//gw.alicdn.com/imgextra/i2/O1CN01BOlDaZ1zxI3l4HUSj_!!6000000006780-2-tps-56-56.png_.webp" alt="">
            <span>{{ v.proname.slice(0,7) }}</span>
        </div>
     </div>


        <div class="list">
            <h3><span>历史搜索</span><van-icon name="delete-o" @click="fun2"/></h3>
            <span class="ss" v-for="(v,index) in arr" :key="index">{{ v }}</span>
        </div>
        <div class="list">
            <h3><span>搜索发现</span><van-icon name="delete-o" /></h3>
            <van-tag plain type="primary">手机</van-tag>
            <van-tag plain type="primary">电脑</van-tag>
            <van-tag plain type="primary">平板</van-tag>
            <van-tag plain type="primary">潮鞋</van-tag>
            <van-tag plain type="primary">卫衣</van-tag>
        </div>

    </div>
</template>

<script>

export default {
    data(){
        return{
            value:"",
            arr:[],
            show: false,
            arrSearch:[],
            searchTxt:'香水',
            arrList1: [],
        }
    },
    methods: {
        fun() {
            this.$router.go(-1)
        },
        async fun1() {
            if (this.value) {
                this.arr.push(this.value)
            }
       
            // xn
            // 请求搜索数据
           const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/search', {
               params: {
                   keyword: this.value
            }
           })
        //    跳转传参
           if (this.value) {
               this.$router.push({
                   path: '/searchDetail',
                   query: {
                       search: JSON.stringify(res.data),
                      value:this.value
                   }
               })
        }
           this.value = ''
        },
        fun2(){
            this.arr=[]
        },
        goDetail2(v) {
            this.$router.push({
                path: '/detail',
                query: {
                    delList: JSON.stringify(v)
                }
            })
        },
        async showList() {
            const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/search', {
                params: {
                    keyword: this.value
                }
            })
            if (res.data) {
                this.arrList1 = res.data
                this.arrSearch = res.data
                this.show = true
            } else {
                // 提示没有商品显示
                this.flag = true
                this.show = false 
            }
        },

    },
    async  mounted() {
    //默认值 
        const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/search', {
            params: {
                keyword: this.value
            }
        })
     if (res.data) {
         this.arrList1 = res.data
     } else {
            this.flag=true
        }

    
}
}

</script>

<style lang="scss" scoped>
.search{
    width: 100%;
    background-color: #fff;
}
.search ul{
    width: 100%;
    height: 0.88rem;
    display: flex;
    justify-content: space-around;
}
.search ul li:nth-child(1){
    width: 40px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search ul li:nth-child(2) {
   flex: 1;
}
.search ul li:nth-child(3) {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search ul li:nth-child(3) button{
    width: 64px;
    height: 30px;
    background-image: linear-gradient(-15deg,#ff5000,#ff6900 61%,#ff963f);
    color:#fff;
    border: none;
    border-radius: .32rem;
    
}
.van-search{
    height: 0.88rem;
    padding: 10px 0px;
}
.van-search__content{
    background: #efefef;
}


.list{
    background-color: #fff;
    padding: 15px;
}
h3 span{
    padding-left: 5px;
}
.van-tag{
    width: 24px;
    height: 16px;
    padding: 5px 10px;
    margin: 3px;
    color: #969799;

}
h3{
    display: flex;
    justify-content: space-between;
    font-size: .32rem;
}
.ss{
    background-color: #f8f8f8;
    border-radius: .2rem;
    height: .5rem;
    line-height: .5rem;
    margin: .15rem .15rem 0 0;
    padding: 0 .25rem;
    font-size: .24rem;
}
/* 真百度 */
    .searchCommand{
    width: 7.5rem;
    //height:18rem;
    position: absolute;
    top:.96rem;
    z-index:999;
    background: #fff;
    transition: all 1s linear;
    .card{
        // @include myStyle();
        width: 7.1rem;
        height: .9rem;
        margin: auto;
        line-height: .9rem;
        border-bottom:.02rem solid #f2f2f2;
         img{
            width: .28rem;
            height: .28rem;
            margin-right: .2rem;
            vertical-align: middle;
         }
    }
}
</style>